<template>
  <view class="pages">
    <Search />
    <scroll-view scroll-y class="cate_left">
      <view
        :class="{ category_title: true, active: activeIndex === index }"
        v-for="(item, index) in categoryData"
        :key="item.cat_id"
        @tap="activeItem(index)"
      >
        {{ item.cat_name }}
      </view>
    </scroll-view>
    <scroll-view scroll-y class="cate_right">
      <view>
        <view v-for="item in contentData[activeIndex]" :key="item.cat_id">
          <text class="content_title"> {{ item.cat_name }}</text>
          <view
            class="goods_wrapper"
            v-for="item in contentData[activeIndex]"
            :key="item.cat_id"
          >
            <navigator
              class="goods_list"
              v-for="pic in item.children"
              :key="pic.cat_id"
              :url="'/pages/goods_list/main?cid=' + pic.cat_id"
            >
              <image :src="pic.cat_icon" mode="" />
              <text class="goods_name">{{ pic.cat_name }}</text>
            </navigator>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import Search from "@/components/search/index.vue";
import { getCategoryData } from "@/api/category";
export default {
  components: {
    Search,
  },
  data() {
    return {
      categoryData: {},
      contentData: {},
      activeIndex: 0,
    };
  },
  onLoad() {
    const data = uni.getStorageSync("dataSave") || [];
    if (data.length === 0) {
      this.getCategoryList();
    } else {
      const old = uni.getStorageSync("timeSave");
      const now = Date.now();

      if ((now - old) / (60 * 1000) > 1) {
        this.getCategoryList();
      } else {
        const { contentData, categoryData } = data;
        this.contentData = contentData;
        this.categoryData = categoryData;
      }
    }
  },
  methods: {
    async getCategoryList() {
      const res = await getCategoryData();
      this.categoryData = res.data.message.map(({ cat_name, cat_id }) => ({
        cat_name,
        cat_id,
      }));
      this.contentData = res.data.message.map(({ children }) => children);
      const dataSave = {
        categoryData: this.categoryData,
        contentData: this.contentData,
      };
      uni.setStorageSync("dataSave", dataSave);
      uni.setStorageSync("timeSave", Date.now());
    },

    activeItem(id) {
      console.log(id);
      this.activeIndex = id;
    },
  },
};
</script>
<style lang="less" scoped>
.cate_left {
  border-right: 1px solid rgba(156, 154, 156, 0.133);
  float: left;
  width: 182rpx;
  height: calc(100vh - 100rpx);
  .category_title {
    font-size: 12rpx;
    height: 80rpx;
    color: rgb(63, 64, 65);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .active {
    &::before {
      content: "";
      width: 5rpx;
      height: 30rpx;
      background-color: red;
      position: absolute;
      left: 0;
    }
  }
}
.cate_right {
  float: left;
  width: 550rpx;
  height: calc(100vh - 200rpx);

  view {
    .content_title {
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
    }

    .goods_wrapper {
      display: flex;
      flex-wrap: wrap;
      .goods_list {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 33.3%;
        padding: 50rpx 0rpx;
        // border: 1px solid red;
        overflow: hidden;
        box-sizing: border-box;

        image {
          width: 120rpx;
          height: 120rpx;
        }

        .goods_name {
          text-align: center;
          font-size: 12rpx;
        }
      }
    }
  }
}
</style>